<template>
    <!-- 绿色导航 -->
    <div class="bg-white">
      <div class="container clearfix">
        <div class="fl">
          <ul class="indeustryNav">
            <li v-for="(item,index) in industrylist" :key="index">
              <p class="clearix">{{item.title}} <i></i></p>
              <ul class="indeustryNav-second">
                <li v-for="(item,index) in item.sub" :key="index">
                  <router-link to="Industry">{{item.title}}</router-link>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="fl">
          <div class="bannerContent mgt-20 clearfix">
            <div class="fl">
              <div class="banner">
              <!--    banner-->
                <div id="banner">
                  <swiper :options="swiperOption" class="swiper-wrap"  ref="mySwiper" v-if="swiperList.length!=0">
                    <swiper-slide v-for="(item,index) in swiperList" :key="index" >
                      <img :src="item.image" alt="" />
                    </swiper-slide>
                    <!-- 常见的小圆点 -->
                    <p class="swiper-pagination"  v-for="(item,index) in swiperList" :key="index" slot="pagination" ></p>
                  </swiper>
                </div>
              </div>
              <ul class="clearfix bannerBottom">
                <li v-for="(item,index) in bannerBottomlist" :key="index"  v-if="index<4"  @click="toShoppagelist(item)">
                  <router-link to=""><img :src="item.logo" alt=""></router-link>
                </li>
              </ul>
            </div>
            <div class="fr loginBox">
              <div class="loginBox-top">
                <img src="../../../static/images/img/pic_touxiang.png" alt="" class="loginBox-touxiang">
                <p class="loginBox-huanyin">Hi！欢迎来到绿采</p>
                <div class="clearfix login-register">
                  <router-link to="Login" class="fl loginBox-login">登录</router-link>
                  <router-link to="Register_new" class="fr loginBox-register">注册</router-link>
                </div>
              </div>
              <div class="loginBox-shop">
                <p class="loginBox-shopTitle">活跃商家 <button>换一批</button></p>
                <ul class="clearfix loginBox-shopImg">
                  <li v-for="(item,index) in registerShoplist" :key="index" v-if="index<6" @click="toShoppagelist(item)">
                    <router-link to=""><img :src="item.logo" alt=""></router-link>
                  </li>
                </ul>
                <div class="mini-project">
                  <img src="../../../static/images/img/mini-project.png" alt="">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 绿色项目 -->
      <div class="lvcaiProjectBg">
        <div class="container">
          <div class="lvcaiProject clearfix">
            <div class="fl lvcaiProject-nav">
              <p>绿色项目</p>
              <ul class="lvcaiProject-list">
                <li><router-link to="">绿别墅 <i></i></router-link></li>
                <li><router-link to="">绿办公 <i></i></router-link></li>
                <li><router-link to="">绿养老 <i></i></router-link></li>
                <li><router-link to="">幼儿园 <i></i></router-link></li>
              </ul>
            </div>
            <ul class="lvcaiProject-right fl clearfix">
              <li>
                <router-link to="">
                  <img src="../../../static/images/img/lvcai-project-nav.png" alt="">
                  <p>金融保险</p>
                </router-link>
              </li>
              <li>
                <router-link to="">
                  <img src="../../../static/images/img/lvcai-project-nav.png" alt="">
                  <p>金融保险</p>
                </router-link>
              </li>
              <li>
                <router-link to="">
                  <img src="../../../static/images/img/lvcai-project-nav.png" alt="">
                  <p>金融保险</p>
                </router-link>
              </li>
              <li>
                <router-link to="">
                  <img src="../../../static/images/img/lvcai-project-nav.png" alt="">
                  <p>金融保险</p>
                </router-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
      
      <!-- 绿采价 -->
      <div class="container">
        <div class="lvcaiProject lvcaiPrice clearfix">
          <div class="fl lvcaiProject-nav lvcaiJia-nav">
            <p>绿采价</p>
            <p class="lvcaiPrice-text">绿采信息发布，绿建，精装修</p>
            <p class="lvcaiPrice-text"><span class="lvcaiPrice-number">2000</span>条</p>
          </div>
          <div class="fl lvcaiPrice-center">
            <p class="lvcaiPrice-centerTitle">绿采商户</p>
            <p class="lvcaiPrice-centerData">绿色商户数据<span class="lvcaiPrice-centerNumber">450</span>条</p>
            <ul class="clearfix lvcaiPrice-centerList">
              <li v-for="(item,index) in lvcaiShoplist" :key="index"  v-if="index<8" @click="toShoppagelist(item)">
                <router-link to=""><img :src="item.logo" alt=""></router-link>
              </li>
            </ul>
          </div>
          <div class="lvcaiPrice-right fr">
              <p>绿色新品</p>
              <router-link to="">立即查看</router-link>
          </div>
        </div>
      </div>
      <!-- 招募和拼标 -->
      <div class="zhaomubgImg">
          <div class="container clearfix mgt-20">
            <!-- 招募 -->
            <div class="fl lvcai-zhaomu-left">
              <p class="zhaomu-title">招募</p>
              <ul class="zhaomu-list">
                <li>
                  <router-link to="">
                    <img src="../../../static/images/img/zhaomu-img.png" alt="" class="fl">
                    <div class="fl mgl-20">
                      <p class="zhaomu-bigText">全友家私全国招募</p>
                      <p class="zhaomu-smallText">全国资本注册</p>
                    </div>
                    <p class="fr zhaomu-date">15天后截止</p>
                  </router-link>
                </li>
                <li>
                  <router-link to="">
                    <img src="../../../static/images/img/zhaomu-img.png" alt="" class="fl">
                    <div class="fl mgl-20">
                      <p class="zhaomu-bigText">全友家私全国招募</p>
                      <p class="zhaomu-smallText">全国资本注册</p>
                    </div>
                    <p class="fr zhaomu-date">15天后截止</p>
                  </router-link>
                </li>
                <li>
                  <router-link to="">
                    <img src="../../../static/images/img/zhaomu-img.png" alt="" class="fl">
                    <div class="fl mgl-20">
                      <p class="zhaomu-bigText">全友家私全国招募</p>
                      <p class="zhaomu-smallText">全国资本注册</p>
                    </div>
                    <p class="fr zhaomu-date">15天后截止</p>
                  </router-link>
                </li>
                <li>
                  <router-link to="">
                    <img src="../../../static/images/img/zhaomu-img.png" alt="" class="fl">
                    <div class="fl mgl-20">
                      <p class="zhaomu-bigText">全友家私全国招募</p>
                      <p class="zhaomu-smallText">全国资本注册</p>
                    </div>
                    <p class="fr zhaomu-date">15天后截止</p>
                  </router-link>
                </li>
              </ul>
            </div>
            <!-- 拼标 -->
            <div class="fr lvcai-zhaomu-right lvcai-zhaomu-left">
              <p class="zhaomu-title">拼标</p>
              <div class="clearfix">
                <ul class="fl pinbiao-left">
                  <li>
                    <router-link to="">
                      <img src="../../../static/images/img/pinbiao-img.png" alt="">
                      <p>立即报名</p>
                    </router-link>
                  </li>
                  <li>
                    <router-link to="">
                      <img src="../../../static/images/img/pinbiao-img.png" alt="">
                      <p>立即报名</p>
                    </router-link>
                  </li>
                  <li>
                    <router-link to="">
                      <img src="../../../static/images/img/pinbiao-img.png" alt="">
                      <p>立即报名</p>
                    </router-link>
                  </li>
                  <li>
                    <router-link to="">
                      <img src="../../../static/images/img/pinbiao-img.png" alt="">
                      <p>立即报名</p>
                    </router-link>
                  </li>
                </ul>
                <div class="fr pinbiao-right">
                  <p>场景对接会</p>
                  <router-link to="">立即查看</router-link>
                </div>
              </div>
            </div>
          </div>
      </div>
      
      <!-- 绿采头条 -->
      <div class="container">
        <div class="lvcai-toutiao">
          <p class="toutiao-title">绿采头条</p>
          <div class="clearfix">
            <div class="fl clearfix toutiao-left">
              <img src="../../../static/images/img/toutiao-img.png" alt="" class="fl">
              <ul class="fl toutiao-left-list">
                <li v-for="(item,index) in lvcaiTopnews" :key="index" v-if="index<8" @click="toLvcaiNewslist(item)">
                  <router-link to=""> {{item.title}}</router-link>
                </li>
              </ul>
            </div>
            <ul class="fr clearfix toutiao-right">
              <li v-for="(item,index) in lvcaiRightnews" :key="index" v-if="index<4">
                <router-link to="">
                  <img :src="item.thumb" alt="">
                  <p>{{item.title}}</p>
                </router-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="demo">

      </div>
    </div>
</template>

<script>
import jquery from '../../assets/js/jquery-1.10.2.min.js'
import axios from 'axios'
import { swiper, swiperSlide } from "vue-awesome-swiper";
require("swiper/dist/css/swiper.css");
export default {
  name:'Index',
  components: {
    swiper,
    swiperSlide
  },
  data(){
    const that = this;
    return{
      imgIndex: 1,
      swiperList:[],
      industrylist:[],
      bannerBottomlist:[],
      registerShoplist:[],
      lvcaiShoplist:[],
      lvcaiTopnews:[],
      lvcaiRightnews:[],
      id:'',
      swiperOption: {
        //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        notNextTick: true,
        //循环
        loop: true,
        //设定初始化时slide的索引
        initialSlide: 0,
        //自动播放
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          /* 触摸滑动后是否继续轮播 */
          disableOnInteraction: false
        },
        //滑动速度
        speed: 2000,
        //滑动方向
        direction: "horizontal",
        //小手掌抓取滑动
        grabCursor: true,
        on: {
          //滑动之后回调函数
          slideChangeTransitionStart: function() {
            /* realIndex为滚动到当前的slide索引值 */
            that.imgIndex= this.realIndex - 1;
          },

        },
        //分页器设置
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          type: "bullets"
        }
      },
    }
  },
  methods:{
    // banner图片轮播接口方法
    getBannerInfo () {
      var that=this
      axios.get('/operation/advertises')
      .then(function(res){
        // console.log(res);
        res = res.data
        that.swiperList = res.response
      })
    },
    // 行业分类导航接口
    getIndustrylist () {
      var that=this
      axios.get('/product/all/category')
      .then(function(res){
        res = res.data
        that.industrylist = res.response
      })
    },
    // banner轮播下方商户接口
    getBannerBottomlist () {
      var that=this
      axios.get('/merchant/ofPosition')
      .then(function(res){
        res = res.data
        that.bannerBottomlist = res.response.merchants
      })
    },
    // 注册下方商家接口 正式环境 加上 ,{params:{position_id:1}} 待确认
    getRegisterShoplist () {
      var that=this
      axios.get('/merchant/ofPosition')
      .then(function(res){
        res = res.data
        that.registerShoplist = res.response.merchants
      })
    },
    // 绿采商户下方商家图片 正式环境 加上 ,{params:{position_id:0}} 待确认
    getLvcaiShoplist () {
      var that=this
      axios.get('/merchant/ofPosition')
      .then(function(res){
        res = res.data
        that.lvcaiShoplist = res.response.merchants
      })
    },
    // 绿采头条资讯 左侧
    getLvcaiTopnews () {
      var that=this
      axios.get('/article/list')
      .then(function(res){
        res = res.data
        that.lvcaiTopnews = res.response
      })
    },
    // 绿采头条资讯 右侧   待 换接口  
    getLvcaiRightnews () {
      var that=this
      axios.get('/article/list')
      .then(function(res){
        res = res.data
        that.lvcaiRightnews = res.response
      })
    },
    // banner下方商户点击进入商家详情 通过id进入对应详情页面  
    toShoppagelist(item) {
      debugger;
      console.log(item)
      this.$router.push({
        name: 'Blueshoppage', params: {item: JSON.stringify(item)}
        //path:'/Blueshoppage/${item.id}',
        // query: {goodsList: goodsList}
        // 解决传过来的参数值在刷新页面后丢失
        //query: {item: JSON.stringify(item)}
      })
    },
    // 点击绿采头条新闻 进入新闻详情
    toLvcaiNewslist(item) {
      debugger;
      console.log(item)
      this.$router.push({
        name: 'Blueinfo_detail', params: {item: JSON.stringify(item)}
        //path:'/Blueinfo_detail/${item.id}',
        // query: {goodsList: goodsList}
        // 解决传过来的参数值在刷新页面后丢失
        //query: {item: JSON.stringify(item)}
      })
    }
  },
  created(){
    this.getLvcaiRightnews();
    this.getLvcaiTopnews();
    this.getLvcaiShoplist();
    this.getRegisterShoplist();
    this.getBannerBottomlist();
    this.getBannerInfo();
    this.getIndustrylist();
    this.$emit('public_header', true);
    this.$emit('public_footer', true);
    this.$emit('public_headerhover', false);
  }
}
</script>

<style>
 @import '../../../static/style/index';
</style>
